<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    :close-on-click-modal="false"
    title="图片下载"
    width="600"
    :before-close="handleClose"
  >
    <div>
      <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
      >
        全选
      </el-checkbox>
      <el-checkbox-group v-model="checkedImage" @change="handleCheckedChange">
        <div v-for="(item, index) in checkedList" :key="index">
          <el-checkbox
            :label="item.id"
            :value="item.id"
            :disabled="item.image_length == 0"
          >
            {{ item.sku || item.custom_sku }} （{{ item.image_length }}张）
          </el-checkbox>
        </div>
      </el-checkbox-group>
    </div>

    <div class="mt-4 text-[#999]">说明：未上传图片的SKU不支持选中下载</div>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirmDownload">下载</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { getDetgetImagesail } from "../api";
import { ImgDownloadTask } from "@/api/index";
import { ElMessage } from "element-plus";
const data = reactive({
  visible: false,
  checkedList: [],
  checkedImage: [],
  checkAll: false,
  isIndeterminate: false,
  gallery_id: null,
  load: false,
});

const {
  visible,
  checkedList,
  checkedImage,
  checkAll,
  isIndeterminate,
  gallery_id,
  load,
} = toRefs(data);
const open = async (row) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  gallery_id.value = row.id;
  getImage(row.id);
};

const getImage = (taskId) => {
  getDetgetImagesail({ taskId }).then(({ data }) => {
    const image_list = data.map((i) => {
      i.image_length = 0;
      i.images_assignment_list.forEach((assignment) => {
        assignment.image_list.forEach((image) => {
          i.image_length += image.values.length;
        });
      });
      return i;
    });

    if (image_list.length == 1) {
      handleDownload(image_list[0].id);
    } else {
      checkedList.value = image_list;
      visible.value = true;
    }
    // imgList.value = data;
  });
};

// 下载图片
const handleDownload = async (task_sku_id) => {
  try {
    const res = await ImgDownloadTask({
      source: 2,
      task_sku_id,
      gallery_id: gallery_id.value,
    });
    ElMessage.success(
      "发起图片下载成功，请稍后前往基础管理-图片下载任务中进行图片包下载"
    );
  } catch (e) {
    throw Error(e);
  }
};

const handleConfirmDownload = () => {
  if (checkedImage.value.length == 0) {
    ElMessage.error("请选择要下载的图片");
    return;
  }
  handleDownload(checkedImage.value);
};

const handleCheckAllChange = (val) => {
  checkedImage.value = val ? checkedList.value.map((item) => item.id) : [];
  isIndeterminate.value = false;
};
const handleCheckedChange = (value) => {
  console.log(value);
  const checkedCount = value.length;
  checkAll.value = checkedCount === checkedList.value.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < checkedList.value.length;
};

const handleClose = () => {
  visible.value = false;
};

defineExpose({ open });
</script>
<style lang="scss" scoped></style>
